<template>
  <div class="nav">
      <img src="img/logo.png" alt="">
      <form action="">
          <input type="text" placeholder="搜索目的地/攻略/游记">
          <button :style="img"></button>
      </form>
  </div>
</template>

<script>
export default {
   data(){
       return {
           img:{backgroundImage: "url(" + require("sta/btn.png") + ")"}
       }
   }
}
</script>

<style scoped>
    .nav{
        width: 100%;
        background-color: #fff;
        border-bottom: 1px solid #e5e5e5;
        height: 1.33rem;
        display: flex;
        justify-content: space-between;
    }
    img{
        width: 2.51rem;
        height: .67rem;
        padding: 15px 10px 0;
    }
    form{
        position: relative;
        align-self: center;
        background-color:#f3f3f3;
        border-radius: .4rem;
        font-size: .32rem;
        padding: 0 .32rem;
        margin-right: 0.4rem;
    }
    input{
        height: .266rem;
        padding: .213rem 0;
        border-radius: .346rem;
        font-size: .32rem;
        width: 100%;
        border: 0;
        outline: 0;
        background: 0;
        font-size: 0.3rem;
    }
    button{
        width: .933rem;
        height: .8rem;
        background: url(/img/btn.png) .213rem .106rem no-repeat;
        background-size: .453rem;
        outline: 0;
        border: 0;
        position: absolute;
        top: 3px;
        right: -4px;
    }
</style>